import { DatePicker, Input } from '@/components/AntdProxy';
import CommonDrawer from '@/components/CommonDrawer';
import { CrudFormLayout } from '@/components/Crud';
import { GroupTreeSelect, LineSelect } from '@/components/CustomForm';
import request from '@/utils/request';
import { Descriptions, Form, message } from 'antd';
import dayjs from 'dayjs';
import VehicleDriverTable from './VehicleDriverTable';

const Save = (props) => {
  const { open, record, onCancel, onOk } = props;
  const [form] = Form.useForm();

  const groupId = Form.useWatch('groupId', form);
  const lineId = Form.useWatch('lineId', form);

  const handleOk = async () => {
    const values = await form.validateFields();
    const { groupId, ...others } = values;
    const params = {
      ...others,
      planDate: values.planDate?.format?.('YYYY-MM-DD'),
    };
    await request({
      url: '/datas/vehicle/plan/add',
      method: 'POST',
      data: params,
    });
    message.success('操作成功');
    onOk?.();
  };

  return (
    <CommonDrawer
      title={record ? '编辑车辆计划' : '新增车辆计划'}
      open={open}
      onClose={onCancel}
      onOk={handleOk}
      afterOpenChange={(visible) => {
        if (!visible) {
          form.resetFields();
        }
      }}
      width={1200}
      destroyOnHidden
    >
      <Form
        form={form}
        layout="horizontal"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        initialValues={
          record ? record : { type: 0, planDate: dayjs().startOf('day') }
        }
      >
        <Descriptions title="第一步：选择计划"></Descriptions>
        <CrudFormLayout itemMinWidth={400}>
          <Form.Item
            label="计划日期"
            name="planDate"
            rules={[{ required: true, message: '请输入计划日期' }]}
          >
            <DatePicker style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item
            label="计划线路"
            name="lineId"
            rules={[{ required: true, message: '请选择计划线路' }]}
          >
            <LineSelect />
          </Form.Item>
          <Form.Item label="备注" name="remark">
            <Input.TextArea placeholder="请输入备注" />
          </Form.Item>
        </CrudFormLayout>
        <Descriptions title="第二步：选择车辆和司机"></Descriptions>
        <CrudFormLayout itemMinWidth={400}>
          <Form.Item
            label="组织"
            name="groupId"
            rules={[{ required: true, message: '请选择组织' }]}
          >
            <GroupTreeSelect placeholder="请选择组织" />
          </Form.Item>
        </CrudFormLayout>
        <Form.Item
          // label="车辆"
          name="datas"
          // labelCol={{ span: 3 }}
          wrapperCol={{ span: 24 }}
          // rules={[
          //   {
          //     validator(rule, value, callback) {
          //       if (value?.some((item) => !item.driverId)) {
          //         callback(new Error('请为每一辆车分配司机'));
          //       }
          //       callback();
          //     },
          //   },
          // ]}
        >
          <VehicleDriverTable groupId={groupId} lineId={lineId} />
        </Form.Item>
      </Form>
    </CommonDrawer>
  );
};

export default Save;
